<template>
	<view class="app forget">
		<view class="title">
			<u-icon name="arrow-leftward" style="margin: 0 0 24rpx" @tap="pageTo"></u-icon>
			<text>忘记密码</text>
			<text class="sub">请输入手机号验证码重置密码</text>
		</view>
		<view class="content">
			<view class="form-view">
				<view class="form-item form-border">
					<input
						placeholder-style="'color':'#8e8e8e'"
						placeholder="请输入手机号码"
						v-model="form1.mobile"
						class="form-input"
						type="text"
						:maxlength="11"
					/>
				</view>
				<view class="form-item form-border">
					<input
						placeholder-style="'color':'#8e8e8e'"
						placeholder="请输入新密码"
						v-model="form1.password"
						class="form-input"
						type="password"
					/>
				</view>
				<view class="form-item form-border">
					<input
						placeholder-style="'color':'#8e8e8e'"
						placeholder="请再次输入新密码"
						v-model="form1.password2"
						class="form-input"
						type="password"
					/>
				</view>
				<view class="form-item form-border">
					<input
						placeholder-style="'color':'#8e8e8e'"
						placeholder="请输入验证码"
						v-model="form1.code"
						class="form-input"
						type="number"
						:maxlength="6"
					/>
					<vk-data-verification-code
						custom-style="font-size: 28rpx"
						type="reset-pwd"
						seconds="60"
						:mobile="form1.mobile"
						:check-user-exist="true"
					></vk-data-verification-code>
				</view>
			</view>
			<view class="submit-btn">
				<button
					class="btn success circle"
					hover-class="hover"
					shape="circle"
					type="success"
					:plain="false"
					:hair-line="false"
					@click="resetPassword"
				>
					重置密码
				</button>
			</view>
		</view>
	</view>
</template>

<script>
var vk = uni.vk // vk依赖

export default {
	data() {
		return {
			// init请求返回的数据
			data: {},
			// 表单请求数据
			form1: { mobile: "", password: "", password2: "", code: "" },
			isRotate: false
		}
	},
	methods: {
		pageTo() {
			vk.navigateBack()
		},
		resetPassword() {
			let that = this
			const { mobile, code, password, password2 } = that.form1
			//重置密码
			if (that.isRotate) {
				//判断是否加载中，避免重复点击请求
				return false
			}
			if (!vk.pubfn.checkStr(mobile, "mobile")) {
				return vk.toast("请输入正确的手机号码")
			}
			if (!vk.pubfn.checkStr(password, "pwd")) {
				return vk.toast("密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线")
			}
			if (!vk.pubfn.checkStr(password2, "pwd")) {
				return vk.toast("密码以字母开头，长度在6~18之间，只能包含字母、数字和下划线")
			}
			if (password != password2) {
				return vk.toast("两次密码必须相同!")
			}
			if (!vk.pubfn.checkStr(code, "mobileCode")) {
				return vk.toast("验证码格式为6位数字")
			}
			that.isRotate = true
			vk.userCenter.resetPasswordByMobile({
				data: that.form1,
				success: () => {
					that.isRotate = false
					vk.alert("密码重置成功,新密码为:" + password, () => {
						// 进入登录页
						vk.redirectTo("../index/index")
					})
				},
				complete: () => {
					that.isRotate = false
				}
			})
		}
	}
}
</script>

<style lang="scss" scoped>
@import url("./css/main.css");

.forget {
	height: 100vh;
	background-color: #f5f5f5;
}

.tips {
	margin-top: 20rpx;
	font-size: 28rpx;
}
</style>
